// 定义 ReaderManager 组件
const ReaderManager = {
    name: 'ReaderManager',
    components: {
        ReaderForm: ReaderForm, // 局部注册 ReaderForm 组件
        ReaderTable: ReaderTable, // 局部注册 ReaderTable 组件
        ReaderQueryForm: ReaderQueryForm
    },
    template: `
<div>
  <h3>读者列表</h3>
  
   <ReaderQueryForm  @search="handleSearch"/>  
   
   <button class="button-class" @click="openForm(null)">添加读者</button>
   
  <ReaderTable 
    :readers="readers"
    @edit="openForm"
    @delete="handleDelete"
  />

  <ReaderForm
    v-model:visible="showForm"
    :reader-data="currentReader"
    @submit="handleSubmit"
  />
</div>
    `,
    setup() {
        // 使用 Vue 的 ref 函数创建响应式数据
        const readers = Vue.ref([])
        const showForm = Vue.ref(false)
        const currentReader = Vue.ref(null)
        const queryParams = Vue.reactive({})

        //组合式函数 - 数据获取
        const fetchData = () => {

            axiosInstance.post('/api/reader/query', queryParams)
                .then(response => {
                    //将获取到的数据赋值给 readers
                    readers.value = response.data;
                })
        }

        //处理查询事件
        const handleSearch = (params) => {
            //直接清空原 queryParams 对象中的所有属性
            for (const key in queryParams) {
                delete queryParams[key];
            }

            Object.assign(queryParams, {...params});
            fetchData();
        }

        //提交表单时的处理函数
        const handleSubmit = (formData) => {
            if (formData.readerId) {
                //更新读者信息
                axiosInstance.put('/api/reader/', formData)
                    .then(response => {
                        message.success('读者信息更新成功');
                        showForm.value = false
                        fetchData({})
                    })
                    .catch(error => {
                        //处理错误的处理
                        showForm.value = true
                    });
            } else {
                //添加新读者
                axiosInstance.post(`/api/reader/`, formData)
                    .then(response => {
                        message.success('读者信息添加成功');
                        showForm.value = false
                        fetchData({})
                    })
                    .catch(error => {
                        //这里会捕获到拦截器抛出的 Error 对象
                        console.log(error.message)
                        showForm.value = true
                    });
            }
        }

        //打开表单时的处理函数
        const openForm = (reader) => {
            //如果有 reader 参数，则复制其属性到 currentReader
            currentReader.value = reader? {...reader} : null
            //显示表单
            showForm.value = true
        }

        //删除读者的处理函数
        const handleDelete = (id) => {
            if (confirm('确定删除吗？')) {
                //发送删除请求
                axiosInstance.delete(`/api/reader/${id}`)
                    .then(response => {
                        message.success('读者信息删除成功');
                        fetchData({})
                    })
            }
        }

        //在组件挂载时获取数据
        onMounted(() => {
            fetchData({})
        })
        //返回创建的函数和数据，供模板使用
        return { readers, showForm, currentReader, openForm, handleDelete, handleSubmit, handleSearch };
    }
};